 

 // import React ,{Component} from 'react';

// import { Component } from "react";

//  jSX
// 遇到 HTML 标签 （以 < 开头），就是HtML 规则解析
// 遇到代码块（以 { 开头），就是JavaScript 规则解析

export default class Main extends Component{
    render(){
        return(
            <div>
                <h2>
                Main - Main - Main
                </h2>
                <h2>
                    React is so easy
                </h2>
                <h2>
                    务必战胜react
                </h2>
                <MyBox/>
            </div>
        )
    }
}

const msg = "Are you ok???"
const flag = true
const list =["Vue","React","Node","typeScript"]
class MyBox extends Component{
    render(){
        return(
        <div>
            <h2>
            MyBox - MyBox - MyBox
            </h2>
            <h2>{msg}</h2>
            <h2>
                {flag?'明天放假了':'除非拉拉不来'}
                </h2>
                {
                    flag ? <div>520快了</div>:<div>快了</div>
                }
                <div>
                    {
                        list.map((item,index)=>{
                            return(
                                <h2 key={index} > {item}</h2>
                            )
                        })
                    }
                </div>
        </div>
       )
    }
       
}